<template>
	<div style="background-color: #FFFFFF;">
		<el-select-tree style="background: #ffffff;"
			:data="treeData"
			:props="props"
			:multiple=false
			:clearable=true
			v-model="value"
			:default-expand-all="defaultExpandAll"
		></el-select-tree>
		
		<hr />
		<p>{{value}}</p>
	
	</div>
	
</template>

<script>
import ElSelectTree from 'el-select-tree';
//
export default {
  components: {
    ElSelectTree
  },
  data() {
    return {
      value: [],
			defaultExpandAll: true,
			props: { value: 'id', label: 'name', children: 'childrenList' },
      treeData: [
        {
          id: 1,
          name: 'text1',
          childrenList: [
						{ id: 15, name: 'text5', childrenList:[{id: 55, name: 'text55'}] }, 
						{ id: 16, name: 'text6' }]
        },
        { id: 2, name: 'text2', childrenList:[{id: 55, name: 'text55'}]  },
        { id: 3, name: 'text3' },
        { id: 4, name: 'text5' }
      ]
    };
  }
};
</script>
<style scoped>

</style>